<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!--
Design by Free CSS Templates
http://www.freecsstemplates.org
Released for free under a Creative Commons Attribution 2.5 License

Name       : Temperate 
Description: A two-column, fixed-width design with dark color scheme.
Version    : 1.0
Released   : 20121205

-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="keywords" content="" />
<meta name="description" content="" />
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>My Tracker</title>
<link href='http://fonts.googleapis.com/css?family=Oswald:400,300' rel='stylesheet' type='text/css' />
<link href='http://fonts.googleapis.com/css?family=Abel|Satisfy' rel='stylesheet' type='text/css' />
<link href="../css/default.css" rel="stylesheet" type="text/css" media="all" />
 <link rel="stylesheet" href="../css/nivo-slider.css" type="text/css" media="screen" />
    <link rel="stylesheet" href="../css/slidestyle.css" type="text/css" media="screen" />
 <link rel="stylesheet" href="../css/themes/default/default.css" type="text/css" media="screen" />
 <link href="../css/iphone.css" media="mobile" rel="stylesheet" type="text/css" />
<!--[if IE 6]>
<link href="default_ie6.css" rel="stylesheet" type="text/css" />
<![endif]-->
<!-- For google map api and style -->
<script
	src="http://maps.googleapis.com/maps/api/js?key=AIzaSyAR33uUSrW-Nc3NWqPUZV30Anh1DOS9oto&sensor=false"
	type="text/javascript"></script>
	<script
	src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
	<script type="text/javascript" src="http://google-maps-utility-library-v3.googlecode.com/svn/tags/markerwithlabel/1.1.5/src/markerwithlabel_packed.js"></script>
<style>
.gmap3{
margin: 0px auto;
/* border: 1px dashed #C0C0C0; */
	width: 800px;
	height: 600px;
	border-style:double;
border-width:medium;
}
.rpanel{
margin: 0px auto;
width:300px;
height:600px;
background-image:url("../images/Location.jpg");
background-repeat:no-repeat;
}
#info{
color:black;
font-size: 18px;
padding:55px 0px 0px 10px;
}
#location{
font-weight:bold;
}
.labels {
     color: white;
     background-color: #0172b6;
     font-family: "Lucida Grande", "Arial", sans-serif;
     font-size: 12px;
     font-weight: bold;
     text-align: center;
     width: 25px;
     border: 1px solid black;
     white-space: nowrap;
   }
</style>
<script type="text/javascript">
var ua = navigator.userAgent.toLowerCase();
var isAndroid = ua.indexOf("android") > -1; //&& ua.indexOf("mobile");

if((navigator.userAgent.match(/iPhone/i)) ||(navigator.userAgent.match(/iPod/i))||(navigator.userAgent.match(/Windows Phone [1-6]/i)) {
window.location = "phonemap.html";
}
else if(isAndroid){
	window.location = "phonemap.html";	
}
</script>
<script>
/* if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
	   if (document.cookie.indexOf("iphone_redirect=false") == -1) window.location = "phonemap.html";
	} */
function initialize() {
	

	var latlng = new google.maps.LatLng(1.3667, 103.80);
	var mapOptions = {
		zoom : 12,
		center : latlng,
		mapTypeId : google.maps.MapTypeId.ROADMAP
	}
	map = new google.maps.Map(document.getElementById("test1"), mapOptions);
	geocoder = new google.maps.Geocoder();

	//get json starts here
	$.getJSON('./data?type=1', function(data) {
		var hlbl=1;
		$.each(data.aaData, function(i, id) {
			//adding markers start here
			var latLng = new google.maps.LatLng(id.lat, id.lng);
			/* var marker = new google.maps.Marker({
				position : latLng,
				map : map,
				icon : '../images/bluemarker5.png'

			});
			//adding markers ends here */
			 var marker = new MarkerWithLabel({
        map: map,
        position: latLng,
        icon: "../images/bluemarker5.png",
        labelContent:hlbl,
        labelAnchor: new google.maps.Point(12, 55),
        labelClass: "labels"
    });

			//show info window
			
			geocoder.geocode({'latLng':latLng}, function(results, status) {
				if (status == google.maps.GeocoderStatus.OK) {
					if (results[1]) {
						/* marker.info = new google.maps.InfoWindow({
							content : results[1].formatted_address + " <br> " + id.dateTime
						}); */
						/* google.maps.event.addListener(marker, 'click', function() {
							//marker.info.open(map, marker);

						}); parseFloat((1.005).toFixed(15))*/
						$("#info").html("<div id ='info'><p>" + results[1].formatted_address +"</p><p style='font-style:italic;'>"+ id.dateTime+"</p><p><input type='checkbox' id='His' onchange='showHistory()' value='Show History' />Show History</p><div>");
						
					} else {
						/* google.maps.event.addListener(marker, 'click', function() {
							content : id.lat + "," +id.lng+ " <br> " + id.dateTime
						});	 */		
						$("#info").html("<div id ='info'><p>Latitude: " + parseFloat((id.lat).toFixed(3)) + ",Longitude: " +parseFloat((id.lng).toFixed(3))+"</p><p style='font-style:italic;'>"+ id.dateTime+"</p><p><input type='checkbox' id='His' onchange='showHistory()' value='Show History' />Show History</p></div>");
					}
				} else {
					/* google.maps.event.addListener(marker, 'click', function() {
						content : id.lat + ", " +id.lng + " <br> " + id.dateTime
					});	 */		
					$("#info").html("<div id ='info'><p>Latitude: " +parseFloat((id.lat).toFixed(3)) + ",Longitude: " +parseFloat((id.lng).toFixed(3))+"</p><p style='font-style:italic;'>"+ id.dateTime+"</p><p><input type='checkbox' id='His' onchange='showHistory()' value='Show History' />Show History</p></div>");
				}
			});

		});

	});
	//get json ends here 
}


function showHistory(){
	
if(document.getElementById("His").checked==true){
	
	geocoder = new google.maps.Geocoder();
	
	//get json starts here
	$.getJSON('./data?type=10', function(data) {
		var hlbl=1;
		$.each(data.aaData, function(i, id) {
			//adding markers start here
			var latLng = new google.maps.LatLng(id.lat, id.lng);
			/* var marker = new google.maps.Marker({
				position : latLng,
				map : map,
				icon : '../images/bluemarker5.png'

			});
			//adding markers ends here */
			 var marker = new MarkerWithLabel({
        map: map,
        position: latLng,
        icon: "../images/tealmarker1.png",
        labelContent:hlbl+1,
        labelAnchor: new google.maps.Point(12, 55),
        labelClass: "labels"
    });
			//adding markers ends here

			//show info window
			
			geocoder.geocode({'latLng':latLng}, function(results, status) {
				if (status == google.maps.GeocoderStatus.OK) {
					if (results[1]) {
						/* marker.info = new google.maps.InfoWindow({
						
						}); */
						google.maps.event.addListener(marker, 'click', function() {
							$("#info").html("<div id ='info'><p>" + results[1].formatted_address +"</p><p style='font-style:italic;'>"+ id.dateTime+"</p><p><input type='checkbox' id='His' onchange='showHistory()' value='Show History'  checked='check' />Show History</p></div>");
						});

					} else {
					 google.maps.event.addListener(marker, 'click', function() {
							$("#info").html("<div id ='info'><p>Latitude: " +parseFloat((id.lat).toFixed(3)) + ",Longitude: " +parseFloat((id.lng).toFixed(3))+"</p><p style='font-style:italic;'>"+ id.dateTime+"</p><p><input type='checkbox' id='His' onchange='showHistory()' value='Show History' checked='check' />Show History</p></div>");
						});	
						
					}
				} else {
				google.maps.event.addListener(marker, 'click', function() {
						$("#info").html("<div id ='info'><p>Latitude: " +parseFloat((id.lat).toFixed(3)) + ",Longitude: " +parseFloat((id.lng).toFixed(3))+"</p><p style='font-style:italic;'>"+ id.dateTime+"</p><p><input type='checkbox' id='His' onchange='showHistory()' value='Show History' checked='check'/>Show History</p></div>");
					});	 	
					
				}
			});

		});

	});
	//get json ends here 
}
else if(document.getElementById("His").checked==false)
	{
	initialize();
	}
}


</script>
 <script type="text/javascript" src="../jquery.nivo.slider.js"></script>
    <script type="text/javascript">
    $(window).load(function() {
        $('#slider').nivoSlider();
    });
    </script>
    
</head>
<body onload="initialize();">
<div id="wrapper">
	<div id="header-wrapper">
		<div id="header" style="backgound-color:#0078D1;">
			<div id="logo">
				<h1><a href="#">Omni-Health</a></h1>
				 <!-- <p>Pte Ltd</p> -->
			</div>
			<div id="menu">
				<ul id="mapnav">
					<li><a href="map.html" accesskey="1" title="">Map</a></li>
					<li><a href="list.html" accesskey="2" title="">List</a></li>
					<li><a href="contact.html" accesskey="3" title="">About Us</a></li>
				</ul>
			</div>
		</div>
	</div>

	<!-- <div id="banner"></div>-->
	<div id="page-wrapper">
		<div id="page">
			<div id="content">
				<div>
					<h2>Welcome To My Tracker</h2>

					<div id="test1" class="gmap3"></div>
					
				</div>
			</div>
			<div id="sidebar">
				<h2>Information Window</h2>
				<div id="info" class="rpanel"> </div>
				
			</div>
		</div>
	</div>
	<!-- <div id="footer-wrapper">
		<div id="footer-content" align="center" style="padding:35px 0px 0px 0px;">
			<div class="slider-wrapper theme-default" style="width:800px; height:260px;" >
            <div id="slider" class="nivoSlider">
                <img src="images/header.jpg" data-thumb="images/header.jpg" alt="" />
                <img src="images/1.jpg" data-thumb="images/1.jpg" alt=""/>
                <img src="images/2.jpg" data-thumb="images/2.jpg" alt="" data-transition="slideInLeft" />
                <img src="images/3.jpg" data-thumb="images/3.jpg" alt=""  />
				 <img src="images/4.jpg" data-thumb="images/4.jpg" alt="" />
				  <img src="images/5.jpg" data-thumb="images/5.jpg" alt=""  />
            </div>
        </div>

	</div>
</div> -->
<div id="footer">
	<p>Copyright (c) by Nanyang Polytechnic.</p>
</div>
</body>
</html>
